<template>
  <div class="citylist" ref="wrapper">
    <div>
      <div class="area">
          <div class="title border-topbottom">当前城市</div>
          <div class="button-list">
              <div class="button-wrap">
                <div class="button">{{this.$store.state.city}}</div>
              </div>
          </div>
      </div>
      <div class="area">
          <div class="title border-topbottom">热门城市</div>
          <div class="button-list">
              <div class="button-wrap" v-for="item in hot" :key="item.id">
                <div class="button" @click="haddleCityName(item.name)">{{item.name}}</div>
              </div>
          </div>
      </div>
      <div class="area" v-for="(item,key) in city" :key="key" :ref="key">
          <div class="title border-topbottom">{{key}}</div>
          <div class="item-list">
            <div class="item-list border-bottom" v-for="cityItem in item" :key="cityItem.id" @click="haddleCityName(cityItem.name)">{{cityItem.name}}</div>
          </div>
      </div> 
      <!-- <div class="absolute">
        <div class="font" v-for="item of fontList" :key="item.id">
          <div class="modular">{{item.font}}</div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  props:{
    hot:Array,
    city:Object,
    // 步骤五：接收letter
    letter: String,
  },
  data() {
      return {
        // fontList: [
        //   {
        //     id: "01",
        //     font:"A"
        //   }, {
        //     id: "02",
        //      font:"B"
        //   }, {
        //     id: "03",
        //      font:"C"
        //   },{
        //     id: "04",
        //      font:"D"
        //   },{
        //     id: "05",
        //      font:"E"
        //   },{
        //     id: "06",
        //      font:"F"
        //   },{
        //     id: "07",
        //      font:"G"
        //   },{
        //     id: "08",
        //      font:"H"
        //   },{
        //     id: "09",
        //      font:"I"
        //   },{
        //     id: "10",
        //      font:"J"
        //   },{
        //     id: "11",
        //      font:"K"
        //   },{
        //     id: "12",
        //      font:"L"
        //   },{
        //     id: "13",
        //      font:"M"
        //   },{
        //     id: "14",
        //      font:"N"
        //   },{
        //     id: "15",
        //      font:"O"
        //   },{
        //     id: "16",
        //      font:"P"
        //   },{
        //     id: "17",
        //      font:"Q"
        //   },{
        //     id: "18",
        //      font:"R"
        //   },{
        //     id: "19",
        //      font:"S"
        //   },{
        //     id: "20",
        //      font:"T"
        //   },{
        //     id: "21",
        //      font:"U"
        //   },{
        //     id: "22",
        //      font:"V"
        //   },{
        //     id: "23",
        //      font:"W"
        //   },{
        //     id: "24",
        //      font:"X"
        //   },{
        //     id: "25",
        //      font:"Y"
        //   },{
        //     id: "26",
        //      font:"Z"
        //   },
        // ],
      };
    },
  mounted(){
    // console.log(this.$refs.wrapper);
    this.scroll=new BScroll(this.$refs.wrapper);
  },
  // 步骤六：监听letter
  watch: {
     letter(){
      //  console.log(this.letter)
      if(this.letter){
        // console.log(this.$refs[this.letter])
        const area=this.$refs[this.letter][0]
        // console.log(area)
        this.scroll.scrollToElement(area)
      }
     }
    },
    methods:{
      haddleCityName(city){
        // console.log(city)
        // this.$store.dispatch('changeCity',city)
        this.$store.commit('changeCity',city)
        this.$router.push('/')
      }
    }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.border-topbottom
  &::before
    border-color #ccc
  &::after
    border-color #ccc
.border-bottom
  &::before
    border-color #ccc
.citylist
  position absolute
  top 1.7rem
  left 0
  right 0
  bottom 0
  overflow hidden
.title 
    background #eeeeee
    line-height .56rem
    font-size .26rem
    padding-left .2rem
.button-list
    padding .1rem .6rem .1rem .1rem
    overflow hidden
    .button-wrap 
        float left
        width 33.33%
        .button 
            border .02rem solid #cccccc
            padding .1rem 0
            text-align center
            margin .1rem
.item-list
  line-height .72rem
  padding-left .2rem 
  font-size .28rem
  color #666
.absolute
  position absolute
.font 
  position relative
  top -40.5rem
  left 7rem
  right 0
  padding-top .16rem
  font-size  .24rem
  text-align center
</style>